<template>
  <div class="wechat">
    <!-- 卡片视图区域 -->
    <div class="wechat_card">
      <!--搜索框与按钮-->
      <el-row :gutter="20"
              class="wechat_card_head"
              type="flex">
        <el-col :span="5">

          <el-input placeholder="输入维修记录编号查询"
                    size="medium"
                    v-model="queryInfo.query"
                    clearable
                    @clear="getTableList"
                    @input="clearData">
            <el-button slot="append"
                       size="medium"
                       icon="el-icon-search"
                       @click="getTableList"></el-button>
          </el-input>
        </el-col>

        <el-button v-has="'6251'"
                   size="medium"
                   class="btn_head_medium"
                   type="primary"
                   @click="addDialogVisible=true"
                   icon="el-icon-circle-plus-outline">新增</el-button>

        <el-button v-has="'6252'"
                   size="medium"
                   type="danger"
                   @click="deleteRecordByIds"
                   icon="el-icon-remove-outline">删除</el-button>

        <!-- 表格列筛选和导出 -->
        <div class="tools_head">
          <el-popover placement="bottom"
                      trigger="click">
            <el-checkbox-group v-model="tableFilterData.checkBoxList">
              <template v-for="(item, i) in tableFilterData.dataNow">
                <el-checkbox :label="item.attr"
                             :key="i"
                             :checked="item.checked"
                             style="display: block;margin:10px;"
                             @change="filterFunHandle('filter',item.attr,i)">
                  {{item.label}}
                </el-checkbox>
              </template>
            </el-checkbox-group>
            <div slot="reference">
              <el-tooltip content="筛选列"
                          placement="bottom">
                <el-button size="small"
                           icon="el-icon-menu"></el-button>
              </el-tooltip>
            </div>
            <el-button size="small"
                       type="text"
                       @click="filterFunHandle('allchecked')">全选</el-button>
            <el-button size="small"
                       type="text"
                       @click="filterFunHandle('cancel')">取消全选</el-button>
          </el-popover>

          <el-tooltip content="导出excel"
                      placement="bottom">
            <el-button size="small"
                       icon="el-icon-download"
                       style="margin-left: 10px"
                       @click="exportDataToExcel"></el-button>
          </el-tooltip>
        </div>

      </el-row>
      <!-- 表格区域 -->
      <el-table :data="tableFilterData.dataList"
                style="width: 100%"
                height="85%"
                border
                stripe
                size="small"
                :key="Math.random()"
                :header-cell-style="{ textAlign: 'center' }"
                :cell-style="{ textAlign: 'center' }"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection">
        </el-table-column>

        <!-- 序号列 -->
        <el-table-column type="index"
                         label="序号"></el-table-column>
        <!-- 依次渲染表格的每列 -->
        <template v-for="(col,index) in tableFilterData.dataNow">
          <!-- 如果当前列的attr为普通类型，渲染内容即可 -->
          <el-table-column :key="index"
                           v-if="col.checked===true &&col.attr!=='state' && col.attr!=='type'&& col.attr!=='project'&& col.attr!=='time'&& col.attr!=='addTime'&& col.attr!=='describe'&& col.attr!=='memo'"
                           align="center"
                           :prop="col.attr"
                           :label="col.label">
          </el-table-column>
          <!-- 如果当前列的attr为state，渲染为switch开关形式 -->
          <el-table-column :key="index"
                           v-if="col.checked===true &&col.attr==='state'"
                           :label="col.label">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.state"
                         active-value="1"
                         inactive-value="0"
                         @change="switchStateChanged(scope.row)">
              </el-switch>
            </template>
          </el-table-column>

          <!-- 如果当前列的attr为project，将project内容渲染为标签形式 -->
          <el-table-column :key="index"
                           v-if="col.checked===true &&col.attr==='project'"
                           :label="col.label"
                           :prop="col.attr"
                           width="150">
            <template slot-scope="scope">
              <el-tag type="warning">{{scope.row.project}}</el-tag>
            </template>
          </el-table-column>
          <!-- 如果当前列的attr为url，渲染为图片形式 -->
          <el-table-column :key="index"
                           v-if="col.checked===true &&col.attr==='url' "
                           :label="col.label"
                           :prop="col.attr">
            <template slot-scope="scope">
              <el-image style="width: 100px; height: 100px"
                        :src="scope.row.url"
                        :fit="'contain'"
                        :preview-src-list="[scope.row.url]">
              </el-image>
            </template>
          </el-table-column>

          <!-- 长度限定 -->
          <el-table-column :key="index+'a'"
                           v-if="col.checked===true && col.attr=='time' "
                           align="center"
                           :prop="col.attr"
                           :label="col.label"
                           width="180">
          </el-table-column>
          <el-table-column :key="index+'a'"
                           v-if="col.checked===true && col.attr=='addTime' "
                           align="center"
                           :prop="col.attr"
                           :label="col.label"
                           width="180">
          </el-table-column>
          <el-table-column :key="index+'a'"
                           v-if="col.checked===true && col.attr=='describe' "
                           align="center"
                           :prop="col.attr"
                           :label="col.label"
                           width="150"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column :key="index+'a'"
                           v-if="col.checked===true && col.attr=='memo' "
                           align="center"
                           :prop="col.attr"
                           :label="col.label"
                           width="150"
                           show-overflow-tooltip>
          </el-table-column>
        </template>

        <el-table-column label="操作"
                         width="240px"
                         fixed="right">
          <template slot-scope="scope">
            <!-- 编辑按钮 -->
            <el-button v-has="'6253'"
                       type="primary"
                       icon="el-icon-edit"
                       size="mini"
                       @click="showEditDialog(scope.row.id)"></el-button>
            <!-- 删除按钮 -->
            <el-button v-has="'6254'"
                       type="danger"
                       icon="el-icon-delete"
                       size="mini"
                       @click="deleteRecordById(scope.row.id)"></el-button>

            <!-- 管理维修用料按钮 -->
            <el-tooltip effect="dark"
                        content="管理维修用料"
                        placement="top"
                        :enterable="false">
              <el-button v-has="'6255'"
                         type="warning"
                         icon="el-icon-share"
                         size="mini"
                         @click="getMeterialList(scope.row.id)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>

      </el-table>

      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="this.queryInfo.pageNum"
                     :page-sizes="[3, 7, 15, 20, 30]"
                     :page-size="this.queryInfo.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"></el-pagination>

      <!-- 点击按钮的弹出框以及详细信息抽屉区域 -->
      <el-drawer title="我是标题"
                 :visible.sync="drawerVisible"
                 :with-header="false"
                 close="drawerClosed"
                 ref="drawer">
        <el-collapse v-model="activeNames"
                     >
          <el-collapse-item title="维修用料"
                            name="1"
                            style="margin-left:20px;">
            <el-table :data="this.equipmentrepairmeterialList"
                      size="small"
                      :header-cell-style="{ textAlign: 'center' }"
                      :cell-style="{ textAlign: 'center' }">
              <el-table-column property="meterialName"
                               label="物料名称"
                               width="180"></el-table-column>
              <el-table-column property="num"
                               label="数量"
                               width="150"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">

                  <!-- 删除物料记录按钮 -->
                  <el-button type="danger"
                             icon="el-icon-delete"
                             size="mini"
                             @click="deleteMeterialById(scope.row.id)"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>

          <el-collapse-item title="添加物料"
                            name="2"
                            style="margin-left:20px;">
            <el-form :model="formInline"
                     label-position="right"
                     label-width="80px"
                     ref="addMeterialFormRef">

              <el-form-item label="物料类型"
                            prop="meterialId">
                <el-select v-model="addMeterialForm.materialId"
                           placeholder="请选择维修用料">
                  <el-option v-for="item in this.meterialList"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="数量"
                            prop="num">
                <el-input-number v-model="addMeterialForm.num"
                                
                                 :min="1"
                                 :max="100"
                                 label="物料数量"></el-input-number>
              </el-form-item>
              <el-form-item>
                <el-button type="primary"
                           @click="addMeterial">确认添加</el-button>
                <el-button @click="drawerClosed">取消</el-button>
              </el-form-item>
            </el-form>
          </el-collapse-item>
        </el-collapse>
      </el-drawer>

      <!-- 添加记录的对话框 -->
      <el-dialog title="添加记录"
                 :visible.sync="addDialogVisible"
                 @close="addDialogClosed"
                 width="50%">
        <!-- 内容主体区 -->
        <el-form :model="addForm"
                 :rules="addFormRules"
                 ref="addFormRef"
                 label-width="90px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="设备ID"
                            prop="equipmentId">
                <el-input v-model="addForm.equipmentId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备编号"
                            prop="equipmentNo">
                <el-input v-model="addForm.equipmentNo"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="维修时间"
                            prop="time">
                <el-date-picker v-model="addForm.time"
                                type="date"
                                placeholder="请选择维修时间"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="维修类别"
                            prop="type">
                <el-input v-model="addForm.type"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="维修项目"
                            prop="project">
                <el-input v-model="addForm.project"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="自理费用"
                            prop="selfMoney">
                <el-input v-model="addForm.selfMoney"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="外包费用"
                            prop="outMoney">
                <el-input v-model="addForm.outMoney"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="总费用"
                            prop="totalMoney">
                <el-input v-model="addForm.totalMoney"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="维修员工"
                            prop="repairName">
                <el-input v-model="addForm.repairName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="维保单位"
                            prop="departmentId">
                <el-input v-model="addForm.departmentId"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="维修标准"
                        prop="standard">
            <el-input v-model="addForm.standard"></el-input>
          </el-form-item>
          <el-form-item label="维修描述"
                        prop="describe">
            <el-input v-model="editForm.describe"></el-input>
          </el-form-item>
          <el-form-item label="备注"
                        prop="memo">
            <el-input type="textarea"
                      v-model="editForm.memo"></el-input>
          </el-form-item>

        </el-form>
        <!-- 底部区域 -->
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="addRecord">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改记录对话框 -->
      <el-dialog title="修改记录"
                 :visible.sync="editDialogVisible"
                 width="50%"
                 @close="editDialogClosed">
        <el-form :model="editForm"
                 :rules="editFormRules"
                 ref="editFormRef"
                 label-width="70px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="设备ID"
                            prop="equipmentId">
                <el-input v-model="editForm.equipmentId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备编号"
                            prop="equipmentNo">
                <el-input v-model="editForm.equipmentNo"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="维修时间"
                            prop="time">
                <el-date-picker v-model="editForm.time"
                                type="date"
                                placeholder="请选择维修时间"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="维修类别"
                            prop="type">
                <el-input v-model="editForm.type"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="维修项目"
                            prop="project">
                <el-input v-model="editForm.project"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="自理费用"
                            prop="selfMoney">
                <el-input v-model="editForm.selfMoney"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="外包费用"
                            prop="outMoney">
                <el-input v-model="editForm.outMoney"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="总费用"
                            prop="totalMoney">
                <el-input v-model="editForm.totalMoney"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="维修员工"
                            prop="repairName">
                <el-input v-model="editForm.repairName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="维保单位"
                            prop="departmentId">
                <el-input v-model="editForm.departmentId"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="维修标准"
                        prop="standard">
            <el-input v-model="editForm.standard"></el-input>
          </el-form-item>
          <el-form-item label="维修描述"
                        prop="describe">
            <el-input v-model="editForm.describe"></el-input>
          </el-form-item>
          <el-form-item label="备注"
                        prop="memo">
            <el-input type="textarea"
                      v-model="editForm.memo"></el-input>
          </el-form-item>

        </el-form>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="editRecordInfo">确 定</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>
<script>
import {
  getList,
  add,
  deleteSelected,
  deleteCurrent,
  getEditInfo,
  edit,
  getDetail,
  modifySwitch,
} from "@/api/logistics/logisticsGreen.js";
export default {
  data () {
    return {
      // 表格列筛选数据
      tableFilterData: {
        dataList: [
          {
            id: "1",
            equipmentId: "102",
            equipmentNo: "AC102",
            time: "2019-9-9",
            type: "0",
            project: "空调",
            standard: "空调正常工作",
            describe: "维修了xxxx",
            selfMoney: "100",
            outMoney: "100",
            totalMoney: "200",
            repairName: "张山",
            departmentId: "11",
            departmentName: "维保十一部",
            communityId: "1",
            addUserId: "10086",
            addTime: "2019-9-9 18：00",
            memo: "",
          },
          {
            id: "2",
            equipmentId: "103",
            equipmentNo: "AC103",
            time: "2019-9-10",
            type: "1",
            project: "油烟机",
            standard: "油烟机正常工作",
            describe: "维修了xxxx",
            selfMoney: "200",
            outMoney: "200",
            totalMoney: "400",
            repairName: "李氏",
            departmentId: "12",
            communityId: "1",
            addUserId: "10086",
            addTime: "2019-9-10 18：00",
            memo: "外包费用详情等",
          }
        ],
        dataNow: [
          { label: "	记录编号	", attr: "id", checked: true },
          { label: "	设备ID	", attr: "equipmentId", checked: true },
          { label: "	设备编号	", attr: "equipmentNo", checked: false },
          { label: "	维修时间	", attr: "time", checked: true },
          { label: "	维修员工	", attr: "repairName", checked: true },
          { label: "	维修类别	", attr: "type", checked: false },
          { label: "	维修项目	", attr: "project", checked: true },
          { label: "	维修标准	", attr: "standard", checked: false },
          { label: "	维修描述	", attr: "describe", checked: true },
          { label: "	自理费用	", attr: "selfMoney", checked: false },
          { label: "	外包费用	", attr: "outMoney", checked: false },
          { label: "	总费用	", attr: "totalMoney", checked: false },
          // { label: "	维保单位id	", attr: "departmentId", checked: false },
          { label: "	维保单位名称	", attr: "departmentName", checked: false },
          // { label: "	小区id	", attr: "communityId", checked: false },
          { label: "	添加人	", attr: "addUserId", checked: false },
          { label: "	添加时间	", attr: "addTime", checked: false },
          { label: "	备注	", attr: "memo", checked: true },


        ],

        checkLabels: [], // 筛选列显示多选框数据
        checkBoxList: [], // 筛选列数据
        indexTwo: 0,
      },
      // 记录列表分页区的参数
      queryInfo: {
        //搜索条件
        query: "",
        // 当前页码
        pageNum: 1,
        //每页显示条数
        pageSize: 7,
      },
      total: 24,


      // 控制添加记录对话框的显示与隐藏
      addDialogVisible: false,
      // 添加记录的表单数据
      addForm: {
        id: "",
        equipmentId: "",
        time: "",
        type: "",
        project: "",
        standard: "",
        describe: "",
        selfMoney: "",
        outMoney: "",
        totalMoney: "",
        repairName: "",
        departmentId: "",
        communityId: "",
        addUserId: "",
        addTime: "",
        memo: "",


      },
      // 添加表单校验规则
      addFormRules: {},


      // 控制修改用户对话框的显示与隐藏
      editDialogVisible: false,
      // 查询到的用户信息
      editForm: {},
      // 编辑表单校验规则
      editFormRules: {},


      // 控制详细信息抽屉的显示与隐藏
      drawerVisible: false,
      // 详细信息的表单数据
      detailForm: {},
      // 被选中的记录id
      selectedList: [],
      selectedStr: {
        ids: "",
      },
      // 待删除的记录id序列
      deleteNow: {
        ids: "",
      },
      // 待删除的物料id序列
      deleteMeterial: {
        ids: "",
      },
      formInline: {
        user: '',
        region: ''
      },
      // 添加物料表单
      addMeterialForm: {
        materialId: '',
        num: 1,
      },
      // 维修用料表格数据
      equipmentrepairmeterialList: [],
      // 物料列表
      meterialList: [],
      // 当前的维修记录id
      nowRecordId: '',
      //激活的手风琴
      activeNames: ['1', '2'],
      //巡逻小队（保安分组）列表
      groupList: {},
      //巡逻路线列表
      rounteList: {},
    }
  },
  created () {
    this.getTableList();

  },
  methods: {
    // 获取列表信息
    async getTableList () {
      // 获取物料列表
      const { data: res0 } = await this.$http.get("MateriallistAction/getBasicInfos")
      if (!res0.success) return this.$message.error('获取物料列表数据失败')
      this.meterialList = res0.rows


      //获取维修记录列表
      if (this.queryInfo.query !== '')
        this.queryInfo.condition = `project like "%${this.queryInfo.query}%"`
      const { data: res } = await this.$http.get("EquipmentrepairrecordAction/getBasicInfos", { params: this.queryInfo })
      console.log(res)
      if (!res.success) return this.$message.error('获取表格数据失败')
      // this.$message.success('获取列表数据成功')
      this.tableFilterData.dataList = res.rows
      this.total = res.total

    },
    // 获取维修用料列表信息
    async getMeterialList (id) {
      // this.drawerClosed()
      this.drawerVisible = true
      this.nowRecordId = id
      this.addMeterialForm.repairRecordId = id
      this.queryInfo.condition = `repairRecordId = "${id}"`
      const { data: res } = await this.$http.get("EquipmentrepairmeterialAction/getBasicInfos", { params: this.queryInfo })
      console.log(res)
      if (!res.success) return this.$message.error('获取当前记录用料数据失败')
      // this.$message.success('获取列表数据成功')
      this.equipmentrepairmeterialList = res.rows

    },
    //监听搜索输入框
    clearData () {
      if (this.queryInfo.query == '') {
        delete this.queryInfo.condition
      }
    },


    // 监听多选框选中的所有记录
    handleSelectionChange (val) {
      // this.selectedList = val;
      this.selectedList = val.map(item => {
        return item.id;
      })
    },
    // 监听pageSize改变的事件
    handleSizeChange (newSize) {
      console.log(newSize)
      this.queryInfo.pageSize = newSize
      this.getTableList()
    },
    // 监听页码值改变的事件
    handleCurrentChange (newPage) {
      console.log(newPage)
      this.queryInfo.pageNum = newPage
      this.getTableList()
    },
    // 监听添加对话框的关闭事件
    addDialogClosed () {
      this.$refs.addFormRef.resetFields()
    },
    // 监听修改对话框的关闭
    editDialogClosed () {
      console.log("ok")
      this.$refs.editFormRef.resetFields()
    },
    // 监听抽屉的关闭
    drawerClosed () {
      this.$refs.addMeterialFormRef.resetFields()
    },
    // 表头列筛选功能
    filterFunHandle (type, currentItem, index) {
      if (type === 'filter') { // 筛选列
        if (event.target.checked === false) {
          this.tableFilterData.dataNow.forEach((item, index, arr) => {
            if (item.attr === currentItem) {
              return item.checked = false
            }
          })
        } else {
          this.tableFilterData.dataNow.forEach((item, index, arr) => {
            if (item.attr === currentItem) {
              return item.checked = true
            }
          })
        }
      } else if (type === 'allchecked') { // 全选
        if (this.tableFilterData.checkLabels.length === 0) {
          this.tableFilterData.dataNow.forEach((result) => {
            this.tableFilterData.checkLabels.push(result.attr)
          })
          this.tableFilterData.checkBoxList = this.tableFilterData.checkLabels // 复选框置为复选所有值，全部选择    
        } else {
          this.tableFilterData.checkBoxList = this.tableFilterData.checkLabels // 复选框置为复选所有值，全部选择
        }
        this.tableFilterData.dataNow.forEach((item, index, arr) => {
          item.checked = true
        })
      } else if (type === 'cancel') { // 取消全选
        this.tableFilterData.checkBoxList = [] // 复选框置为空，全部不选择
        this.tableFilterData.dataNow.forEach((item, index, arr) => {
          item.checked = false
        })
      }
    },

    // 类型筛选（标签筛选）
    filterType (value, row) {
      return row.type === value;
    },






    // 添加记录
    addRecord () {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post("EquipmentrepairrecordAction/addObject", this.addForm)
        console.log(res)
        if (!res.success) return this.$message.error('添加失败')
        this.$message.success('添加记录成功！')
        // 隐藏添加记录的对话框
        this.addDialogVisible = false
        // 重新获取记录列表数据
        this.getTableList()
      })
    },
    // 添加物料
    addMeterial () {
      this.$refs.addMeterialFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post("EquipmentrepairmeterialAction/addObject", this.addMeterialForm)
        console.log(res)
        if (!res.success) return this.$message.error('添加物料失败')
        this.$message.success('添加记录成功！')
        // 隐藏添加记录的对话框
        this.addDialogVisible = false
        // 重新获取记录列表数据
        this.getMeterialList(this.nowRecordId)
      })
    },
    // 删除（批量）
    async deleteRecordByIds () {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 如果用户确认删除，返回值为字符串confirm
      // 如果用户取消删除，返回值未字符串cancel
      // console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除')
      }
      // 将selectList数组处理成字符串形式并赋值给selectStr的ids属性
      var str = ""
      for (var i = 0; i < this.selectedList.length - 1; i++) {
        str += this.selectedList[i] + ",";
      }
      str += this.selectedList[this.selectedList.length - 1]
      this.selectedStr.ids = str

      const { data: res } = await this.$http.post("EquipmentrepairrecordAction/deleteByIds", this.selectedStr)
      if (!res.success) return this.$message.error('删除记录失败！')
      this.$message.success('删除记录成功！')
      this.getTableList()

    },
    // 查看修改记录（当前记录）
    async showEditDialog (id) {
      const { data: res } = await this.$http.post("EquipmentrepairrecordAction/getObjectById", { id })
      if (!res.success)
        return this.$message.error('获取信息失败')
      this.editForm = res.rows[0]
      // console.log(this.editForm);
      this.editDialogVisible = !this.editDialogVisible
    },
    // 确认修改
    editRecordInfo () {
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return
        // 发起修改记录信息的数据请求
        console.log(this.editForm)
        const { data: res } = await this.$http.post("EquipmentrepairrecordAction/updateNoNull", this.editForm)
        if (!res.success) return this.$message.error('更新信息失败！')
        // 关闭对话框
        this.editDialogVisible = false
        // 刷新数据列表
        this.getTableList()
        // 提示修改成功
        this.$message.success('更新信息成功！')
      })
    },
    // 删除（当前记录）
    async deleteRecordById (id) {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 如果用户确认删除，返回值为字符串confirm
      // 如果用户取消删除，返回值未字符串cancel
      // console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除')
      }
      this.deleteNow.ids = id

      const { data: res } = await this.$http.post("EquipmentrepairrecordAction/deleteByIds", this.deleteNow)
      if (!res.success) return this.$message.error('删除记录失败！')
      this.$message.success('删除记录成功！')
      this.getTableList()

    },
    // 删除物料记录
    async deleteMeterialById (id) {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm('此操作将永久删除物料, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 如果用户确认删除，返回值为字符串confirm
      // 如果用户取消删除，返回值未字符串cancel
      // console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除')
      }
      this.deleteMeterial.ids = id

      const { data: res } = await this.$http.post("EquipmentrepairmeterialAction/deleteByIds", this.deleteMeterial)
      if (!res.success) return this.$message.error('删除记录失败！')
      this.$message.success('删除记录成功！')
      this.getMeterialList(this.nowRecordId)

    },
    // 导出表格
    async exportDataToExcel () {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm('此操作将把数据为导出表格, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 如果用户确认删除，返回值为字符串confirm
      // 如果用户取消删除，返回值未字符串cancel
      // console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除')
      }

      const { date: res } = await this.$http.post("EquipmentrepairrecordAction/exportDataToExcel")
      if (!res.success) return this.$message.error('导出表格失败')
      this.$message.success('导出表格成功')
    },


  }

}


</script>
<style scoped>
.el-table {
  font-size: 13px;
}
.el-pagination {
  text-align: left;
  padding-top: 20px;
}
</style>